<template xmlns:th="http://www.w3.org/1999/xhtml">
    <div>
       <div class="testTit">
           <img src="../../assets/test/test_top.png" alt="" width="100%">
      </div>
        <div class="testDiv" @click="test(true,2)">
          <img src="../../assets/test/test_tab1.png" alt="" width="100%">
        </div>
         <div class="testDiv" @click="test(true,1)">
          <img src="../../assets/test/test_tab2.png" alt="" width="100%">
        </div>
        <div class="testBot">你合适的专业是什么？做完测评告诉你</div>
      <mt-popup class="myModal" v-model="state.test"  modal="true" :closeOnClickModal=false>
        <mt-header >
          <mt-button icon="back"  @click="lastQuestion()" v-if="this.state.questionIndex>0" slot="left">上一题</mt-button>
          <mt-button class="mintui" @click="test(false)" slot="right">&times</mt-button>
        </mt-header>
        <div class="desc">
          <h3>第{{state.questionIndex+1}}题：{{questions[state.questionIndex].title}}</h3>
          <mt-radio
            v-model="questions[state.questionIndex].result"
            :options="questions[state.questionIndex].options||options">
          </mt-radio>
          <mt-button style="width: 50%;margin:0 auto" @click="nextQuestion()" :disabled="!questions[state.questionIndex].result" type="primary" size="large">{{(state.questionIndex < questions.length-1)?'下一题':'提交'}}</mt-button>
        </div>
      </mt-popup>

      <mt-popup class="myModal" v-model="state.resultModal" modal="true" closeOnClickModal=false>
        <mt-header :title="result.title">
          <mt-button icon="back" slot="left" @click="reTest">重新测试</mt-button>
          <mt-button class="mintui" @click="openResultModal(false)" slot="right">&times</mt-button>
        </mt-header>
        <div class="desc" v-if="!state.error">
          <mt-cell :title="cell.title+'('+cell.key+')'" class="page-progress" v-for="cell in result.cells">
            <mt-progress :value="cell.val" :bar-height="10">
              <div slot="start">{{cell.val.toFixed(2)}}%</div>
            </mt-progress>
          </mt-cell>
          <div v-if="state.gtype==1">
            <p >{{result.subTitle}}</p>
            <h3 style="text-align: center">{{result.resultText}}</h3>
            <p v-html="result.introduce" class="phead"></p>
            <p v-for="info in result.interestList" v-html="info" class="phead"></p>
          </div>
          <div v-else-if="state.gtype==2">
            <!--性格测试-->
            <p>{{result.subTitle}}</p>
            <h3 style="text-align: center">{{result.resultText}}</h3>

            <h4>特征</h4>
            <p v-html="result.introduce" class="phead"></p>
            <h4>职业倾向</h4>
            <p v-html="result.feature" class="phead" ></p>
            <div v-for="sublist in result.characterList">
              <h4>{{sublist[0]}}</h4>
              <p v-for="(sub, index) in sublist" v-show="index>0" class="phead">{{sub}}</p>
            </div>
          </div>
        </div>
        <div class="desc" v-else>
          <p class="phead">{{state.error}}</p>
        </div>
      </mt-popup>

    </div>
</template>

<script>
     import { Toast,Indicator } from 'mint-ui';
    export default {
        name: "test",
        data(){return {
          state:{test:false,questionIndex:0,resultModal:false,gtype:1,error:""},
          result:{title:"测试结果",introduce:'',feature:"",resultText:"",subTitle:"",interestList:[],characterList:[],cells:[]},
          questions:[{}],
          options: [{
            label: '是',
            value: 1
          },
            {
              label: '否',
              value: 2
            }]
        }},
        computed:{
        },
        methods:{
          fillResult:function(data){
            let vm = this;
            delete vm.state.error;
            vm.result.resultText = data.resultText;
            vm.state.gtype = data.gtype;
            let m = data.dataMap;
            if(vm.state.gtype==2){
              //职业性格测试
              vm.result.subTitle = "亲爱的同学，您的职业性格测试结果为：";
              vm.result.introduce = data.introduce;
              vm.result.feature = data.feature;
              vm.result.characterList= data.characterList;
              vm.result.cells = [{key:"E",title:"外向",val:m.E*100/(m.E+m.I)},{key:"I",title:"内向",val:m.I*100/(m.E+m.I)},
                                  {key:"S",title:"实感",val:m.S*100/(m.S+m.N)},{key:"N",title:"直觉",val:m.N*100/(m.S+m.N)},
                                  {key:"T",title:"思考",val:m.T*100/(m.T+m.F)},{key:"F",title:"情感",val:m.F*100/(m.T+m.F)},
                                  {key:"J",title:"判断",val:m.J*100/(m.J+m.P)},{key:"P",title:"知觉",val:m.P*100/(m.J+m.P)}];

            }else{
              vm.result.subTitle = "亲爱的同学，您的职业兴趣测试结果为：";
              vm.result.introduce = "职业兴趣测试能够帮助我们认识到自己的职业兴趣，有利于了解自己的性情及其对生活、学习的影响，从而有针对性地扬长避短。";
              vm.result.interestList = data.characterList;
              vm.result.cells = [];
              vm.result.cells = [{key:"R",title:"现实型",val:m.R*10/3},{key:"I",title:"研究型",val:m.I*10/3},{key:"A",title:"艺术型",val:m.A*10/3},
                                 {key:"S",title:"社会型",val:m.S*10/3},{key:"E",title:"事业型",val:m.E*10/3},{key:"C",title:"常规型",val:m.C*10/3}];

            }
          },
          test:function(show,gtype){
            let vm = this;
            if(show){
              this.$http.get("/auth/quiz?gtype="+gtype).then((resp)=>{
                vm.questions = resp.data.questions;
                if(resp.data.characterList ){

                  if(resp.data.characterList.length){
                    vm.fillResult(resp.data);
                    //正常结果
                    vm.openResultModal(true);
                  }else{
                    //异常结果
                    vm.state.error = "坏了！您的性格可把我给难倒了！建议您重新测试，或者咨询金榜专家为您深层剖析。";
                    vm.openResultModal(true);
                  }
                }else{
                  vm.state.test = true;
                }
              })
            }else{
              this.state.test = false;
            }
          },
          openResultModal:function(show){
            this.state.resultModal = show;
          },
          reTest:function(){
            this.state.resultModal = false;
            this.state.test = true;
            this.state.questionIndex= 0;
          },
          lastQuestion:function(){
            this.state.questionIndex--;
          },
          nextQuestion:function(){
            let vm = this;
           if(this.state.questionIndex<this.questions.length-1){
            //if(this.state.questionIndex<5){
              this.state.questionIndex++;
            }else{
              vm.state.test = false;
               Indicator.open({
                 text: '提交中...',
                 spinnerType: 'fading-circle'
               });
              this.$http.post("/auth/answer",JSON.parse(JSON.stringify(this.questions))).then((resp)=>{
                if(resp.code == 0){
                  Indicator.close();
                  vm.fillResult(resp.data);
                  vm.openResultModal(true);
                }
              })
            }
          },
          characterTest:function(){
            this.state.characterTest = true;
          },
         /* entertainTest:function(){
            this.state.entertainTest = true;
          }*/
        }
    }
</script>

<style>
  .page-progress .mint-cell-value {
    -webkit-box-flex: 2.5;
    -ms-flex: 2.5;
    flex: 2.5;
    position: relative;
    top: -20px;
  }
  .page-progress .mt-progress {
    width: 100%;
    position: absolute;
    top: 5px;
  }
  .page-progress-wrapper {
    padding: 0 10px;
    margin-top: 50px;
  }
  .page-progress-wrapper .mt-progress {
    position: relative;
  }
  .page-progress-wrapper .progress-fade-transition {
    -webkit-transition: opacity .3s;
    transition: opacity .3s;
  }
  .page-progress-wrapper .progress-fade-enter, .page-progress-wrapper .progress-fade-leave {
    opacity: 0;
  }
  .mt-progress-runway{
    background-color: white;
  }
</style>
<style scoped>
  .testTit{
    margin-bottom: 10px;
  }
  .testDiv{
      margin: 10px 10px 0 10px;
  }
  .testBot{
    text-align: center;
    margin-top: 40px;
    font-size:14px;
    font-family:SourceHanSansCN-Normal;
    font-weight:400;
    color:rgba(48,69,102,1);
   line-height:21px;
  }
  .myModal{
    width: 98%;
  }
  .myModal .desc{
    padding: 15px;
    max-height: 400px;
    overflow-y: auto;
  }

</style>
